<template>
	<uni-popup ref="popup" type="center" :mask-click="false">
		<view class="update-popup">
			<view class="update-header">
				<view class="update-title">发现新版本</view>
				<view class="update-version">最新版本: {{ newVersion }}</view>
			</view>

			<view class="update-content">{{ updateInfo }}</view>

			<!-- 下载进度条 -->
			<view v-if="downloading" class="progress-box">
				<view class="progress-wrapper">
					<view class="progress-bar" :style="{ width: `${downloadProgress}%` }"></view>
				</view>
				<text class="progress-text">正在下载 {{ downloadProgress }}%</text>
			</view>

			<!-- 按钮区域 -->
			<view class="btn-group">
				<button v-if="!downloading && !downloadFinished" class="btn btn-primary" @click="startUpdate">立即更新</button>
				<button v-if="downloadFinished" class="btn btn-success" @click="installNow">立即安装</button>
				<button v-if="!downloading" class="btn btn-secondary" @click="closePopup">暂不更新</button>
			</view>
		</view>
	</uni-popup>

	<!-- 添加无更新提示弹窗 -->
	<uni-popup ref="noUpdatePopup" type="center">
		<view class="no-update-popup">
			<view class="icon">✓</view>
			<view class="title">当前已是最新版本</view>
			<view class="version">当前版本: {{ currentVersion }}</view>
			<button class="btn btn-primary" @click="closeNoUpdatePopup">确定</button>
		</view>
	</uni-popup>
</template>

<script setup>
	// 引入electron
	const { ipcRenderer } = require('electron');

	const popup = ref(null);
	const newVersion = ref('');
	const updateInfo = ref('');
	const downloading = ref(false);
	const downloadFinished = ref(false);
	const downloadProgress = ref(0);
	const noUpdatePopup = ref(null);
	const currentVersion = ref('');

	const emit = defineEmits(['hasNewVersion', 'noNewVersion']);

	const init = () => {
		console.log('checkForUpdates');
		ipcRenderer.on('error', (e, args) => {
			console.log('🚀 ~ error ~ args:', args);
			uni.showToast({
				title: '检查更新失败',
				icon: 'none',
			});
			emit('noNewVersion', { error: args });
		});

		ipcRenderer.on('update-available', (e, args) => {
			console.log('🚀 ~ update-available ~ args:', args);
			newVersion.value = args.version;
			updateInfo.value = args.releaseNotes || '有新的版本可供更新';
			popup.value.open();
			emit('hasNewVersion', {
				version: args.version,
				info: args.releaseNotes,
			});
		});

		ipcRenderer.on('update-not-available', (e, args) => {
			console.log('🚀 ~ update-not-available ~ args:', args);
			currentVersion.value = args.version;
			noUpdatePopup.value.open();
			emit('noNewVersion', { currentVersion: args.version });
		});

		ipcRenderer.on('download-progress', (e, args) => {
			console.log('🚀 ~ download-progress ~ args:', args);
			downloading.value = true;
			downloadProgress.value = Math.floor(args.percent);
		});

		ipcRenderer.on('update-downloaded', (e, args) => {
			console.log('🚀 ~ update-downloaded ~ args:', args);
			downloading.value = false;
			downloadFinished.value = true;
		});
	};

	// 开始更新
	const startUpdate = () => {
		ipcRenderer.invoke('downloadUpdate');
	};

	// 立即安装
	const installNow = () => {
		ipcRenderer.invoke('installUpdate');
	};

	// 关闭弹窗
	const closePopup = () => {
		popup.value.close();
	};

	// 关闭无更新提示弹窗
	const closeNoUpdatePopup = () => {
		noUpdatePopup.value.close();
	};

	// 组件挂载时检查更新
	onMounted(() => {
		init();
	});

	// 提供给外部调用的检查更新方法
	const checkUpdate = async () => {
		try {
			const res = await ipcRenderer.invoke('checkForUpdates');
			console.log('checkUpdate', res);
			if (!res.success) noUpdatePopup.value.open();
		} catch (error) {
			console.log('checkUpdate error', error);
			noUpdatePopup.value.open();
		}
	};

	// 对外暴露方法
	defineExpose({
		checkUpdate,
	});
</script>

<style lang="scss" scoped>
	.update-popup {
		background: #fff;
		border-radius: 16px;
		padding: 32px;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
		animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
		width: 380px;
		
		:deep(.uni-icons) {
			font-size: 12px !important;
		}

		.update-header {
			text-align: center;
			margin-bottom: 28px;

			.update-title {
				font-size: 24px;
				font-weight: 600;
				color: #1a1a1a;
				margin-bottom: 12px;
			}

			.update-version {
				font-size: 16px;
				color: #666;
				background: #f5f7fa;
				padding: 6px 16px;
				border-radius: 20px;
				display: inline-block;
			}
		}

		.update-content {
			font-size: 15px;
			line-height: 1.6;
			color: #444;
			margin: 24px 0;
			padding: 16px;
			background: #f8f9fa;
			border-radius: 12px;
			border-left: 4px solid #007bff;
			white-space: pre-line;
		}

		.progress-box {
			margin: 28px 0;

			.progress-wrapper {
				background: #eef2f5;
				height: 8px;
				border-radius: 8px;
				overflow: hidden;
				box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);

				.progress-bar {
					height: 100%;
					background: linear-gradient(90deg, #0066ff, #2d8fff);
					border-radius: 8px;
					transition: width 0.4s ease;
					box-shadow: 0 2px 4px rgba(0, 102, 255, 0.15);
				}
			}

			.progress-text {
				font-size: 14px;
				color: #666;
				text-align: center;
				display: block;
				margin-top: 12px;
				font-weight: 500;
			}
		}

		.btn-group {
			display: flex;
			justify-content: center;
			gap: 16px;
			margin-top: 28px;

			.btn {
				padding: 12px 32px;
				border-radius: 10px;
				font-size: 16px;
				font-weight: 600;
				transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
				border: none;
				cursor: pointer;

				&:hover {
					transform: translateY(-1px);
					box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
				}

				&:active {
					transform: scale(0.98);
				}

				&.btn-primary {
					background: linear-gradient(135deg, #007bff, #0056b3);
					color: white;

					&:hover {
						background: linear-gradient(135deg, #0056b3, #004094);
					}
				}

				&.btn-success {
					background: linear-gradient(135deg, #28a745, #218838);
					color: white;

					&:hover {
						background: linear-gradient(135deg, #218838, #1e7e34);
					}
				}

				&.btn-secondary {
					background: #f8f9fa;
					color: #444;
					border: 1px solid #e9ecef;

					&:hover {
						background: #e9ecef;
						border-color: #dee2e6;
					}
				}
			}
		}
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(20px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.no-update-popup {
		background: #fff;
		border-radius: 16px;
		padding: 36px;
		width: 320px;
		text-align: center;
		animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);

		.icon {
			font-size: 48px;
			color: #28a745;
			margin-bottom: 20px;
			height: 60px;
			width: 60px;
			line-height: 60px;
			background: #e8f5e9;
			border-radius: 50%;
			margin: 0 auto 20px;
		}

		.title {
			font-size: 20px;
			font-weight: 600;
			color: #1a1a1a;
			margin-bottom: 12px;
		}

		.version {
			font-size: 15px;
			color: #666;
			margin-bottom: 28px;
			background: #f5f7fa;
			padding: 6px 16px;
			border-radius: 20px;
			display: inline-block;
		}

		.btn {
			padding: 12px 36px;
			border-radius: 10px;
			font-size: 16px;
			font-weight: 600;
			background: linear-gradient(135deg, #007bff, #0056b3);
			color: white;
			border: none;
			transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
			cursor: pointer;

			&:hover {
				transform: translateY(-1px);
				box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
				background: linear-gradient(135deg, #0056b3, #004094);
			}

			&:active {
				transform: scale(0.98);
			}
		}
	}
</style>
